<nz-card>
  <p class="title-p">
    <i nz-icon nzType="subnode" nzTheme="outline" class="t-icon"></i>
    基本信息
  </p>

  <div class="edit-control">
    <nz-form-item>
      <nz-form-label [nzFlex]="formLabelWidth" nzRequired>标题</nz-form-label>
      <nz-form-control nzFlex="400px">
        <input
          nz-input
          maxlength="50"
          placeholder="请输入标题"
          [(ngModel)]="formParams.name"
          [disabled]="setDisabled()"
        />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzFlex]="formLabelWidth" nzRequired>状态</nz-form-label>
      <nz-form-control nzFlex="400px">
        <nz-radio-group [(ngModel)]="formParams.status" [nzDisabled]="setDisabled()">
          <label nz-radio [nzValue]="1">启用</label>
          <label nz-radio [nzValue]="0">禁用</label>
        </nz-radio-group>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzFlex]="formLabelWidth" nzRequired>水印图片</nz-form-label>
      <nz-form-control nzFlex="400px">
        <zdy-upload
          [(ngModel)]="formParams.img"
          [limitParams]="{
            nzFileType: '.png,.gif'
          }"
          [beforeUpload]="imageBeforeUpload"
          [disabled]="setDisabled()"
        ></zdy-upload>

        <p class="img-tip">
          仅支持png或gif格式文件，请必须上传正方形图片
        </p>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzFlex]="formLabelWidth">备注</nz-form-label>
      <nz-form-control nzFlex="400px">
        <nz-textarea-count [nzMaxCharacterCount]="100">
          <textarea
            rows="4"
            nz-input
            maxlength="100"
            placeholder="仅内部可见"
            [(ngModel)]="formParams.remark"
            [disabled]="setDisabled()"
          ></textarea>
        </nz-textarea-count>
      </nz-form-control>
    </nz-form-item>
  </div>

  <nz-divider></nz-divider>

  <p class="title-p">
    <i nz-icon nzType="subnode" nzTheme="outline" class="t-icon"></i>
    适用范围
  </p>

  <div class="edit-control">
    <nz-form-item>
      <nz-form-label [nzFlex]="formLabelWidth" nzRequired>生效时间</nz-form-label>
      <nz-form-control nzFlex="400px">
        <nz-range-picker
          style="width: 100%;"
          [nzShowTime]="true"
          [nzShowTime]="{ nzFormat: 'HH:mm:ss' }"
          nzFormat="yyyy-MM-dd HH:mm:ss"
          [(ngModel)]="takeEffectDates"
          [nzDisabled]="setDisabled()"
          (ngModelChange)="dateChange($event, ['useBeginTime', 'useEndTime'])"
        ></nz-range-picker>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzFlex]="formLabelWidth" nzRequired>适用用户</nz-form-label>
      <nz-form-control nzFlex="400px">
        <nz-radio-group [(ngModel)]="formParams.userType" [nzDisabled]="setDisabled()">
          <label nz-radio [nzValue]="0">不限制</label>
          <label nz-radio [nzValue]="1">C端</label>
          <label nz-radio [nzValue]="2">B端</label>
        </nz-radio-group>
      </nz-form-control>
    </nz-form-item>
  </div>

  <nz-divider></nz-divider>

  <p class="title-p">
    <i nz-icon nzType="subnode" nzTheme="outline" class="t-icon"></i>
    适用商品
  </p>

  <div class="edit-control">
    <nz-form-item>
      <nz-form-label nzFlex="120px">指定机型</nz-form-label>
      <nz-form-control nzFlex="400px">
        <p class="appoint-model">
          <label
            nz-radio
            [(ngModel)]="modelAll"
            [nzDisabled]="setDisabled()"
            (ngModelChange)="modelOwnerAllChange($event, 1)"
          >全选</label>

          <button
            nz-button
            nzType="link"
            nzSize="small"
            nzDanger
            (click)="modelOwnerNotAllChange(1)"
          >全不选</button>
        </p>
        <div class="p-t-6">
          已选
          <b *ngIf="modelAll;else templateAll">
            全部
          </b>
          <ng-template #templateAll>
            <b>{{ defaultModelKeys.length || 0 }}</b> 个
          </ng-template>
          内容
          
          <button
            nz-button
            nzType="link"
            [disabled]="setDisabled()"
            (click)="selectMoreModel()"
          >选择更多</button>

          <!-- select-tree -->
          <model-select-tree
            [(ngModel)]="isModelVisible"
            [defaultKeys]="defaultModelKeys"
            (onSubmit)="subModelTree($event)"
          ></model-select-tree>
        </div>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label nzFlex="120px">货主</nz-form-label>
      <nz-form-control nzFlex="400px">
        <p class="p-b-10">
          <label
            nz-radio
            [(ngModel)]="supplierAll"
            [nzDisabled]="setDisabled()"
            (ngModelChange)="modelOwnerAllChange($event, 2)"
          >全选</label>

          <button
            nz-button
            nzType="link"
            nzSize="small"
            nzDanger
            (click)="modelOwnerNotAllChange(2)"
          >全不选</button>
        </p>

        <nz-select
          nzShowSearch
          nzAllowClear
          [nzMaxTagCount]="1"
          nzMode="multiple"
          nzPlaceHolder="请选择货主"
          [(ngModel)]="supplierSelected"
          [nzDisabled]="setDisabled()"
          (ngModelChange)="supplierChange($event)"
        >
          <nz-option
            *ngFor="let option of supplierOptions"
            [nzLabel]="option.name"
            [nzValue]="option.id"
          ></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label nzFlex="120px">指定B端成色</nz-form-label>
      <nz-form-control nzFlex="400px">
        <zdy-checkbox-group
          *ngIf="conditionOptionsB.length"
          [checkOptions]="conditionOptionsB"
          [checkKeys]="{
            key: 'id',
            label: 'name'
          }"
          [(ngModel)]="selectConditionB"
          [disabled]="setDisabled()"
        ></zdy-checkbox-group>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label nzFlex="120px">指定C端成色</nz-form-label>
      <nz-form-control nzFlex="400px">
        <zdy-checkbox-group
          *ngIf="conditionOptionsC.length"
          [checkOptions]="conditionOptionsC"
          [checkKeys]="{
            key: 'id',
            label: 'name'
          }"
          [(ngModel)]="selectConditionC"
          [disabled]="setDisabled()"
        ></zdy-checkbox-group>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label nzFlex="120px">排除可用商品</nz-form-label>
      <nz-form-control nzFlex="400px">
        已选 <b style="color: #ff4d4f;">{{ excludeGoodsIds?.length || '0' }}</b> 个商品
        <button
          nz-button
          nzType="link"
          [disabled]="!excludeGoodsIds.length"
          (click)="previewModal(1)"
        >点击查看</button>

        <button
          nz-button
          nzType="link"
          [disabled]="setDisabled()"
          (click)="showSelectGoods(1)"
        >选择更多</button>

        <i
          nz-icon
          nzType="exclamation-circle"
          nzTheme="outline"
          class="m-l-10"
          nz-tooltip
          nzTooltipTitle="可以在指定机型和货主之内，去掉部分商品"
        ></i>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label nzFlex="120px">追加可用商品</nz-form-label>
      <nz-form-control nzFlex="400px">
        已选 <b style="color: #ff4d4f;">{{ addGoodsIds?.length || '0' }}</b> 个商品
        <button
          nz-button
          nzType="link"
          (click)="previewModal(2)"
          [disabled]="!addGoodsIds?.length"
        >点击查看</button>

        <button
          nz-button
          nzType="link"
          [disabled]="setDisabled()"
          (click)="showSelectGoods(2)"
        >选择更多</button>

        <i
          nz-icon
          nzType="exclamation-circle"
          nzTheme="outline"
          class="m-l-10"
          nz-tooltip
          nzTooltipTitle="可以在指定机型和货主之外，再指定部分商品"
        ></i>
      </nz-form-control>
    </nz-form-item>
  </div>
</nz-card>

<nz-card class="m-t-4">
  <div nz-row nzJustify="center">
    <button
      *ngIf="['0', '1'].includes(routeParams.type) && permission.userPermission.has('secondGoods:watermark:update')"
      nz-button
      nzType="primary"
      [nzLoading]="subformLoading"
      (click)="submitData()"
    >保存</button>

    <button
      nz-button
      nzType="default"
      class="m-l-10"
      (click)="back()"
    >返回</button>

    <button
      *ngIf="['1', '2'].includes(routeParams.type)"
      nz-button
      nzType="primary"
      class="m-l-10"
      (click)="showConflictModal()"
    >水印冲突验证</button>
  </div>
</nz-card>

<!-- S 选择指定 Modal -->
<goods-select-modal
  [(ngModel)]="isGoodsVisible"
  [tickOptions]="modelGoodOptions"
  [disabledOptions]="disabledOptions"
  (subOptions)="submitSelectGoods($event)"
></goods-select-modal>
<!-- S 选择指定 Modal -->

<!-- S 已选查看 -->
<goods-preview-modal
  [(ngModel)]="isPreviewVisible"
  [tableDatas]="previewTable"
  [previewIds]="previewGoodIds"
  [disable]="setDisabled()"
  (dataChange)="addExcludeChange($event)"
></goods-preview-modal>
<!-- E 已选查看 -->

<!-- S 水印冲突验证 Modal -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzWidth]="1100"
  [nzFooter]="null"
  [(nzVisible)]="isConflictVisible"
  [nzTitle]="'水印冲突验证'"
  (nzOnCancel)="isConflictVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <p class="conflict-modal-title">
        根据【水印状态、适用用户、生效时间、商品范围】判断，可能冲突的水印如下：
        <span>（仅判断状态 = 启用的水印信息）</span>
      </p>

      <div class="p-t-10">
        <nz-table
          #conflictTable
          nzSize="small"
          nzBordered
          [nzShowPagination]="false"
          [nzData]="conflictTableData">
          <thead>
            <tr>
              <th nzAlign="center">水印ID</th>
              <th nzAlign="center">水印状态</th>
              <th nzAlign="center">水印名称</th>
              <th nzAlign="center">适用用户</th>
              <th nzAlign="center">生效时间</th>
              <th nzAlign="center">冲突商品</th>
            </tr>
          </thead>
          <tbody>
            <tr
              *ngFor="let data of conflictTable.data; let index = index;"
              [ngStyle]="{
                'color': index === 0 ? '#F56C6C' : ''
              }">
              <!-- 水印ID -->
              <td nzAlign="center">
                {{ index === 0 ? '当前' : data.id }}
              </td>
              <!-- 水印状态 -->
              <td nzAlign="center">
                <ng-container [ngSwitch]="data.status">
                  <span style="color: #F56C6C;" *ngSwitchCase="0">禁用</span>
                  <span style="color: #67C23A;" *ngSwitchCase="1">启用</span>
                  <span *ngSwitchDefault>-</span>
                </ng-container>
              </td>
              <!-- 水印名称 -->
              <td nzAlign="center">
                <ng-container *ngIf="index === 0; else elseLkTemplate">
                  {{ data.name }}
                </ng-container>
                <ng-template #elseLkTemplate>
                  <a
                    nz-button
                    nzType="link"
                    nzSize="small"
                    target="_blank"
                    routerLink="/goods/goods-watermark-edit"
                    [queryParams]="{id: data.id, type: 2}"
                  >{{ data.name }}</a>
                </ng-template>
              </td>
              <!-- 适用用户 -->
              <td nzAlign="center">
                <ng-container [ngSwitch]="data.userType">
                  <nz-tag *ngSwitchCase="0">通用</nz-tag>
                  <nz-tag *ngSwitchCase="1" [nzColor]="'#87d068'">C端</nz-tag>
                  <nz-tag *ngSwitchCase="2" [nzColor]="'#2db7f5'">B端</nz-tag>
                  <span *ngSwitchDefault>-</span>
                </ng-container>
              </td>
              <!-- 生效时间 -->
              <td nzAlign="center">
                <ng-container *ngIf="data.useBeginTime; else elseTimeTemplate">
                  {{ data.useBeginTime }} ~ {{ data.useEndTime }}
                </ng-container>
                <ng-template #elseTimeTemplate>-</ng-template>
              </td>
              <!-- 冲突商品 -->
              <td nzAlign="left">
                <ng-container *ngIf="index !== 0 && data?.goods?.length; else elseGooTemplate">
                  <p *ngFor="let item of data.goods">
                    <a
                      class="good-alink"
                      target="_blank"
                      [routerLink]="['/used-store/usedCommodityInfo']"
                      [queryParams]="{id: item.id}"
                    >[{{ item.id }}] {{ item.name }}</a>
                  </p>
                </ng-container>
                <ng-template #elseGooTemplate>
                  -
                </ng-template>
              </td>
            </tr>
          </tbody>
        </nz-table>
      </div>
    </div>
  </div>
</nz-modal>
<!-- E 水印冲突验证 Modal -->